import React from 'react'
import PropTypes from 'prop-types'
import { withStyles } from '@material-ui/core/styles'
import "./css/NormalTimePicker.css"

const styles = theme =>({

})

class NormalTimePicker extends React.Component {

    constructor(props) {
        super(props)
        this.state = {
            hours: [
                '00','01','02','03','04','05','06','07','08','09','10',
                '11','12','13','14','15','16','17','18','19','20','21',
                '22','23'
            ],
            minute: [
                '00','01','02','03','04','05','06','07','08','09','10',
                '11','12','13','14','15','16','17','18','19','20','21',
                '22','23','24','25','26','27','28','29','30','31','32',
                '33','34','35','36','37','38','39','40','41','42','43',
                '44','45','46','47','48','49','50','51','52','53','54',
                '55','56','57','58','59'
            ],
            second: [
                '00','01','02','03','04','05','06','07','08','09','10',
                '11','12','13','14','15','16','17','18','19','20','21',
                '22','23','24','25','26','27','28','29','30','31','32',
                '33','34','35','36','37','38','39','40','41','42','43',
                '44','45','46','47','48','49','50','51','52','53','54',
                '55','56','57','58','59'
            ],
            currentHour: 0,
            currentSecond: 0,
            currentMinute: 0
        }
    }

    handleHourClick = (event) => {
        if(event.target.tagName === 'LI'){

            const { hours, minute, second } = this.state
            let { onSelect, currentHour, currentSecond, currentMinute } = this.props

            currentHour = hours.indexOf(event.target.innerHTML)

            if(onSelect){
                onSelect(`${hours[currentHour]}:${minute[currentMinute]}:${second[currentSecond]}`,
                    currentHour, currentMinute, currentSecond)
            }

            let elem = this.hourUl

            this.handleTransition(event,elem)
        }
    }
    handleMinuteClick = (event) => {
        if(event.target.tagName === 'LI'){

            const { hours, minute, second } = this.state
            let { onSelect, currentHour, currentSecond, currentMinute } = this.props

            currentMinute = minute.indexOf(event.target.innerHTML)

            if(onSelect){
                onSelect(`${hours[currentHour]}:${minute[currentMinute]}:${second[currentSecond]}`,
                    currentHour, currentMinute, currentSecond)
            }

            let elem = this.minuteUl

            this.handleTransition(event,elem)
        }
    }
    handleSecondClick = (event) => {
        if(event.target.tagName === 'LI'){

            const { hours, minute, second } = this.state
            let { onSelect, currentHour, currentSecond, currentMinute } = this.props

            currentSecond = second.indexOf(event.target.innerHTML)

            if(onSelect){
                onSelect(`${hours[currentHour]}:${minute[currentMinute]}:${second[currentSecond]}`,
                    currentHour, currentMinute, currentSecond)
            }

            let elem = this.secondUl

            this.handleTransition(event,elem)
        }
    }
    handleTransition = (event, elem) =>{

        let currentScrollTop = elem.scrollTop

        const end = 32 * event.target.innerHTML;


        let speed = Math.ceil( (end - currentScrollTop) / 8 );

        let time = setInterval(function(){
            currentScrollTop += speed;
            if(currentScrollTop >= end) {
                elem.scrollTop = end;
                clearTimeout(time);
            }else {
                elem.scrollTop = currentScrollTop;
            }
        },20);

    }
    render(){
        const { currentHour, currentSecond, currentMinute } = this.props
        const { hours, minute, second } = this.state
        return (
            <div className="timePicker">
                <div className="time"  ref={ ul => this.hourUl = ul }>
                    <ul onClick={this.handleHourClick}>
                        {
                            hours.map(function(value, index){
                                return (
                                    currentHour === index ?
                                    <li key={index} className="selected">{value}</li> :
                                    <li key={index}>{value}</li>
                                )
                            })
                        }
                    </ul>
                </div>
                <div className="time" ref={ ul => this.minuteUl = ul }>
                    <ul onClick={this.handleMinuteClick}>
                        {
                            minute.map(function(value, index){
                                return (
                                    currentMinute === index ?
                                        <li key={index} className="selected">{value}</li> :
                                        <li key={index}>{value}</li>
                                )
                            })
                        }
                    </ul>
                </div>
                <div className="time" ref={ ul => this.secondUl = ul }>
                    <ul onClick={this.handleSecondClick}>
                        {
                            second.map(function(value, index){
                                return (
                                    currentSecond === index ?
                                        <li key={index} className="selected">{value}</li> :
                                        <li key={index}>{value}</li>
                                )
                            })
                        }
                    </ul>
                </div>
            </div>
        )

    }
}

NormalTimePicker.propTypes = {
    onSelect: PropTypes.func,
    currentHour: PropTypes.number,
    currentMinute:PropTypes.number,
    currentSecond: PropTypes.number
}

export default withStyles(styles)(NormalTimePicker)



